import React, { Component } from "react";
import { Layout, Menu, Dropdown, Tag, Avatar, Tooltip, Button } from "antd";
import data from "../../mobx/data";
import { Route, Switch, Redirect } from "react-router-dom";
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  DownOutlined,
  PoweroffOutlined,
  ExclamationCircleOutlined,
  VideoCameraOutlined,
  UploadOutlined,
} from "@ant-design/icons";
import "./index.scss";
import { observer } from "mobx-react";
import { baseURL } from "../../api/ajax";
import { routerList } from "../../utils/routerlist";
import HomeCpt from "../home";
import Category from "../tiku/index";
import ExpList from "../tiku/experience/explist";
import ChooseList from "../tiku/choose";
import Exppublish from "../tiku/experience/exppublish";
import Expmana from "../tiku/experience/expmana";
import ChoosePub from "../tiku/choose/chopub";
import ChooseMana from "../tiku/choose/chomana";
import { HashHistory, roleList } from "../../utils";
import { http } from "../../api";
import Paper from "../tiku/choose/paper";

import Expdetails from "../tiku/experience/expdetails";
import Taotidetails from "../tiku/choose/taotidetails";
import Changepass from "../personal/changepass";
import Collect from "../personal/collect";
import Star from "../personal/star";

import ManageList from "../retroaction/managelist";
import Advise from "../retroaction/advise";

import HeatManage from "../comprehensive/heat";
import AnnonceCpt from "../announce";
import AnnounceList from "../announce/announceList";
import Comment from "../personal/comment";

const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu;

@observer
export default class MainPage extends Component {
  state = {
    collapsed: false,
  };
  componentDidMount() {
    if (localStorage.phone) {
      http.userlist({ phone: localStorage.phone }).then((res) => {
        if (res.data.code == 200) {
          data.changeUserinfo(res.data.val);
          //   console.log(data.userinfo.phone);
        }
      });
    }
  }
  renderItem = (list) => {
    if (data.userinfo) {
      return list.map((item, i) => {
        if (item.permission > data.userinfo.role) {
          return null;
        } else {
          if (item.children) {
            // 子菜单
            return (
              <SubMenu key={item.path} icon={item.icon} title={item.text}>
                {this.renderItem(item.children)}
              </SubMenu>
            );
          } else {
            return (
              <Menu.Item key={item.path} icon={item.icon}>
                {item.text}
              </Menu.Item>
            );
          }
        }
      });
    } else {
      return null;
    }
  };
  sendFile = () => {
    var file = this.upload.files[0];

    var datafile = new FormData();
    datafile.append("avatar", file);
    http.sendavatar(datafile).then((res) => {
      if (res.data.code == 200) {
        data.changeUserinfo({
          avatar: res.data.path,
        });
      }
    });
  };
  uploadFile = () => {
    this.upload.click();
  };
  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };
  menuonclick = (item, key, path) => {
    HashHistory.push(item.key);
  };
  handleLogout = () => {
    HashHistory.replace("/login");
  };

  render() {
    const { userinfo } = data;
    const { location } = this.props;
    const pathname = location.pathname;
    const defaultSelectedKeys = [pathname];
    var values = pathname.split("/");
    const defaultOpenKeys = ["/" + values[1] + "/" + values[2]];
    return (
      <div style={{ height: "100%" }}>
        <Layout
          style={{
            width: "100%",
            height: "100%",
            minHeight: "100%",
            display: "flex",
          }}
        >
          <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
            <div className="logo" style={{ height: 54 }}>
              <img
                style={{ width: "80%", marginTop: 8 }}
                src="https://static.nowcoder.com/images/res/logo/logo-v3.png?t=20191013"
              />
            </div>
            <Menu
              theme="dark"
              mode="inline"
              defaultSelectedKeys={defaultSelectedKeys}
              defaultOpenKeys={defaultOpenKeys}
              onClick={this.menuonclick}
            >
              {this.renderItem(routerList)}
            </Menu>
          </Sider>
          <Layout className="site-layout">
            <Header
              className="site-layout-background"
              style={{
                padding: 0,
                color: "#000",
                display: "flex",
                justifyContent: "center",
              }}
            >
              {React.createElement(
                this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
                {
                  className: "trigger",
                  onClick: this.toggle,
                  style: {
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                    margin: "0 20px",
                  },
                }
              )}
              <marquee behavior="" direction="" style={{ color: "#000" }}>
                自由我毕生追求，荣耀我生命的全部。
              </marquee>
              <div className="head-info">
                <input
                  onChange={this.sendFile}
                  type="file"
                  style={{ display: "none" }}
                  ref={(el) => (this.upload = el)}
                />

                {userinfo &&
                  (userinfo.avatar ? (
                    <Avatar
                      onClick={this.uploadFile}
                      style={{
                        backgroundColor: "#87d068",
                        margin: "0px 10px",
                        cursor: "pointer",
                      }}
                      src={userinfo.avatar.replace(/public/, baseURL)}
                    />
                  ) : (
                    <Avatar
                      onClick={this.uploadFile}
                      style={{
                        backgroundColor: "#87d068",
                        margin: "0px 10px",
                        cursor: "pointer",
                      }}
                      size={50}
                      icon={<UserOutlined />}
                    />
                  ))}
                <Dropdown
                  overlay={
                    <Menu>
                      <Menu.Item key={1}>用户信息</Menu.Item>
                    </Menu>
                  }
                >
                  <span
                    style={{
                      height: 28,
                      display: "flex",
                      alignItems: "center",
                    }}
                  >
                    {data.userinfo &&
                      (data.userinfo.username
                        ? data.userinfo.username
                        : data.userinfo.phone)}
                    <DownOutlined />{" "}
                  </span>
                </Dropdown>
                <Tag
                  color={
                    data.userinfo &&
                    roleList.find((item) => item.value == data.userinfo.role)
                      .color
                  }
                  style={{ margin: "0 10px" }}
                >
                  {data.userinfo &&
                    roleList.find((item) => item.value == data.userinfo.role)
                      .text}
                </Tag>
                <Tooltip title="退出登录">
                  <Button
                    type="danger"
                    shape="circle"
                    onClick={this.handleLogout}
                    icon={<PoweroffOutlined />}
                  />
                </Tooltip>
              </div>
            </Header>
            <Content
              className="site-layout-background content"
              style={{
                margin: "24px 16px",
                padding: 24,
                minHeight: 280,
                overflowY: "auto",
              }}
            >
              <Switch>
                <Route
                  path="/main"
                  exact
                  render={() => <Redirect to="/main/home" />}
                />
                <Route path="/main/home" component={HomeCpt} />
                <Route path="/main/home" component={HomeCpt} />
                <Route
                  path="/main/tiku"
                  render={() => (
                    <Switch>
                      <Route
                        path="/main/tiku/experience"
                        render={() => (
                          <Switch>
                            <Route
                              path="/main/tiku/experience/publish"
                              component={Exppublish}
                            />
                            <Route
                              path="/main/tiku/experience/explist"
                              component={ExpList}
                            />
                            <Route
                              path="/main/tiku/experience/expdetails"
                              component={Expdetails}
                            />
                            <Route
                              path="/main/tiku/experience/expmana"
                              component={Expmana}
                            />
                            <Route
                              path="/main/tiku/experience/details"
                              component={Expdetails}
                            />
                          </Switch>
                        )}
                      />
                      <Route path="/main/tiku/category" component={Category} />
                      <Route
                        path="/main/tiku/choose"
                        render={() => (
                          <Switch>
                            <Route
                              path="/main/tiku/choose/publish"
                              component={ChoosePub}
                            />
                            <Route
                              path="/main/tiku/choose/list"
                              component={ChooseList}
                            />
                            <Route
                              path="/main/tiku/choose/manage"
                              component={ChooseMana}
                            />
                            <Route
                              path="/main/tiku/choose/paper"
                              component={Paper}
                            />
                            <Route
                              path="/main/tiku/choose/taotidetails:item"
                              component={Taotidetails}
                            />
                          </Switch>
                        )}
                      />
                    </Switch>
                  )}
                />
                <Route
                  path="/main/person"
                  render={() => (
                    <Switch>
                      <Route path="/main/person/collect" component={Collect} />
                      <Route path="/main/person/star" component={Star} />
                      <Route
                        path="/main/person/changepass"
                        component={Changepass}
                      />
                      <Route path="/main/person/comment" component={Comment} />
                    </Switch>
                  )}
                />
                <Route
                  path="/main/retroaction"
                  render={() => (
                    <Switch>
                      <Route
                        path="/main/retroaction/manage"
                        component={Advise}
                      />
                      <Route
                        path="/main/retroaction/list"
                        component={ManageList}
                      />
                    </Switch>
                  )}
                />
                <Route
                  path="/main/composite/hot"
                  render={() => (
                    <Switch>
                      <Route path="/main/composite/manage" component="" />
                      <Route
                        path="/main/composite/hot"
                        component={HeatManage}
                      />
                    </Switch>
                  )}
                />
                <Route
                  path="/main/announc"
                  render={() => (
                    <Switch>
                      <Route
                        path="/main/announc/list"
                        component={AnnounceList}
                      />
                      <Route
                        path="/main/announc/manage"
                        component={AnnonceCpt}
                      />
                    </Switch>
                  )}
                />
              </Switch>
            </Content>
          </Layout>
        </Layout>
      </div>
    );
  }
}
